<template>
  <div :class="['bottom-box', isHidden ? 'hidden-icon' : '']">
    <div class="fold-icon" @click="closeBottomBox">
      <el-icon>
        <DArrowRight :class="{ 'hidden-icon': isHidden }" />
      </el-icon>
    </div>
    <div class="bottom-title">
      <img src="@/assets/images/home/pic_img.png" />
      <span>模型运行概览</span>
    </div>
    <div class="tabs-box">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="tabs-item">
            <div class="item-left">
              <div class="item-title">{{ state.modelTitle || '---' }}</div>
              <div class="key-value">
                <div class="item-key">模型类型</div>
                <div class="item-value">
                  {{ state.baseInfo?.modelTypeName || '---' }}
                </div>
              </div>
              <div class="key-value">
                <div class="item-key">模型版本号</div>
                <div class="item-value">{{ state.baseInfo?.version || '---' }}</div>
              </div>
              <div class="key-value">
                <div class="item-key">模型单位</div>
                <div class="item-value">{{ state.baseInfo?.unit || '---' }}</div>
              </div>
              <div class="key-value-intr">
                <div class="item-key-intr">模型说明</div>
                <div class="item-value-intr">
                  {{ state.baseInfo?.modelDesc || '---' }}
                </div>
              </div>
              <div class="key-value">
                <div class="item-key">注册时间</div>
                <div class="item-value">
                  {{ state.baseInfo?.createTime || '---' }}
                </div>
              </div>
            </div>
            <div class="item-right">
              <el-image
                v-if="state.currentBtn === 0 && state.baseInfo?.sketchUrl"
                :src="state.baseInfo?.sketchUrl"
                :preview-src-list="[state.baseInfo?.sketchUrl]"
              />
              <el-image
                v-else-if="state.currentBtn === 1 && state.baseInfo?.genUrl"
                :src="state.baseInfo?.genUrl"
                :preview-src-list="[state.baseInfo?.genUrl]"
              />
              <div class="no-pig" v-else>暂无</div>
              <div class="btns">
                <div
                  :class="['btn-item', state.currentBtn == index ? 'active' : '']"
                  :key="index"
                  @click="tabsImg(index)"
                  v-for="(item, index) in state.picBtn"
                >
                  <span>{{ item.btn }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="使用概况" name="second">
          <div class="tabs-item">
            <div class="item-box">
              <div class="item-group">
                <div class="item-name">累计调用次数：</div>
                <div class="item-num">{{ modelOverview?.tnum || 0 }} s</div>
              </div>
              <div class="item-group">
                <div class="item-name">成功调用次数：</div>
                <div class="item-num">{{ modelOverview?.snum || 0 }} 次</div>
              </div>
              <div class="item-group">
                <div class="item-name">失败调用次数：</div>
                <div class="item-num">{{ modelOverview?.fnum || 0 }} 次</div>
              </div>
              <div class="item-group">
                <div class="item-name">成功率：</div>
                <div class="item-num">{{ modelOverview?.success || 0 }} %</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评价反馈" name="third">
          <div class="tabs-item">
            <div class="items-group">
              <div class="items" :key="index" v-for="(item, index) in state.evaluate">
                <div class="item-left">
                  <!-- 评价内容 -->
                  <div class="data-content">
                    {{ item.comContent || '---' }}
                  </div>
                  <div class="user-group">
                    <div class="item">{{ item.comPerson || '---' }}</div>
                    &ensp; &ensp; &ensp;
                    <div class="item">{{ item.comTime || '---' }}</div>
                  </div>
                </div>
                <div class="item-right">
                  <div class="score-group">
                    <div class="word">评分</div>
                    <div class="num">{{ item.scores || '---' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import emitter from '@/utils/bus'
import { getModelAssetURL } from '@/utils/loadAssets'
import { modelEfficiency, modelStability } from '@/services/modules/model-exam'
import {
  // 模型详情
  getModelDetails,
  // 查询模型评价内容
  getModelComments
} from '@/services/modules/home'
const activeName = ref('first')
const modelOverview = ref({})
const state = reactive({
  currentBtn: 0,
  bottomFlag: true,
  currentTabs: 0,
  modelTitle: '',
  baseInfo: {},
  evaluate: {},
  useInfo: {},
  picBtn: [
    {
      btn: '模型示意图'
    },
    {
      btn: '模型概化图'
    }
  ],
  tabsArr: [
    {
      name: '基本信息'
    },
    {
      name: '使用概况'
    },
    {
      name: '评价反馈'
    }
  ]
})
const isHidden = ref(false)
const closeBottomBox = () => {
  isHidden.value = !isHidden.value
}
emitter.on('trunB', (value) => {
  // state.bottomFlag = value
  // isHidden.value = false
})
function handleClick() {}
emitter.on('modelData', (value) => {
  state.modelTitle = value.btnName
  modelOverview.value = {}
  // state.baseInfo = value.baseInfo
  // state.evaluate = value.evaluate
  // state.useInfo = value.useInfo
  modelStability({
    pageNum: 1,
    pageSize: 10,
    modelName: value.id,
    modelType: value.typeId,
    typeCode: value.typeCode,
    month: new Date().getMonth(),
    year: new Date().getFullYear() + ''
  }).then((res) => {
    if (res.code === 200) {
      modelOverview.value = res.data.instructions
    }
  })
  modelDetail(value)
})
function modelDetail(val) {
  // 获取模型基本信息
  getModelDetails({ modelId: val.id }).then((res) => {
    if (res.code == 200) {
      state.baseInfo = res.data
      state.baseInfo.modelTypeName = val.specialName
    }
  })
  // 查询模型评价内容
  getModelComments({ mid: val.id }).then((res) => {
    if (res.code == 200) {
      state.evaluate = res.data.comments
    }
  })
}
const switchTabs = (index) => {
  state.currentTabs = index
}
const tabsImg = (index) => {
  state.currentBtn = index
}
</script>
<style lang="less" scoped>
.bottom-box {
  z-index: 101;
  position: absolute;
  bottom: 0px;
  right: 300px;
  width: 1000px;
  height: 480px;
  background-image: url(@/assets/images/left_img.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // border-radius: 4px!important;
  border: 1px solid #1c629e;
  background-color: rgba(0, 1, 125, 0) !important;
  transition: bottom 1s;
  &.hidden-icon {
    bottom: -480px;
    transition: bottom 1s;
  }
  .fold-icon {
    width: 120px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    background: #058cc7;
    top: -10px;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    transform: translateY(-50%);

    @keyframes myload {
      from {
        opacity: 0;
        -webkit-transform: rotate(90deg);
        /* Safari */
        transform: rotate(90deg);
        /* 标准语法 */
      }

      to {
        opacity: 1;
        -webkit-transform: rotate(90deg);
        /* Safari */
        transform: rotate(90deg);
        /* 标准语法 */
      }
    }

    .el-icon {
      cursor: pointer;
      position: relative;
      display: block;
      color: white;
      animation: myload 1s infinite ease-in-out;
      -webkit-animation: myload 1s infinite ease-in-out;

      svg {
        &.hidden-icon {
          // border-top-right-radius: 35px;
          // border-bottom-right-radius: 35px;
          transform: rotate(180deg);
        }
      }
    }
  }
  .bottom-title {
    height: 35px;
    margin: 10px 0 15px 10px;
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      margin-right: 15px;
    }
    span {
      font-size: var(--header-fontsize);
      color: white;
    }
  }
  .tabs-box {
    margin-left: 20px;
    :deep(.el-tabs__item) {
      color: white;
      font-size: var(--content-fontsize);
      font-weight: 400;
      &.is-active {
        color: var(--el-color-primary);
      }
    }
    .tabs-titles {
      display: flex;
      .title-item {
        cursor: pointer;
        width: 100px;
        height: 20px;
        // border-bottom: 1px solid #9fe8ff;
        margin-right: 20px;
        text-align: center;
        span {
          color: white;
        }
      }
      .title-item-active {
        cursor: pointer;
        width: 100px;
        height: 20px;
        border-bottom: 1px solid #35ade8;
        margin-right: 20px;
        text-align: center;
        span {
          color: #35ade8;
        }
      }
      .title-item:hover {
        cursor: pointer;
        width: 100px;
        height: 20px;
        border-bottom: 1px solid #35ade8;
        margin-right: 20px;
        text-align: center;
        span {
          color: #35ade8;
        }
      }
    }
    .tabs-item {
      display: flex;
      justify-content: space-between;
      height: 100%;
      padding: 15px;
      padding-top: 10px;
      .item-left {
        .item-title {
          color: white;
          font-size: 18px;
          margin-bottom: 5px;
        }
        .key-value {
          display: flex;
          line-height: 35px;
          .item-key {
            width: 100px;
            color: white;
            font-size: var(--content-fontsize);
          }
          .item-value {
            width: 250px;
            color: white;
            font-size: var(--content-fontsize);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .key-value-intr {
          display: flex;
          .item-key-intr {
            width: 100px;
            color: white;
            font-size: var(--content-fontsize);
          }
          .item-value-intr {
            width: 500px;
            height: 150px;
            overflow-y: auto;
            color: white;
            font-size: var(--content-fontsize);
          }
        }
      }
      .item-right {
        .el-image {
          width: 300px;
          height: 280px;
        }
        .no-pig {
          width: 300px;
          height: 280px;
          border: 1px solid white;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
        }
        .btns {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 10px;
          .btn-item {
            cursor: pointer;
            color: white;
            &.active {
              color: #35ade8;
            }
          }
        }
      }
      .item-box {
        padding: 10px;
        .item-group {
          display: flex;
          line-height: 30px;
          .item-name {
            width: 150px;
            color: white;
          }
          .item-num {
            font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
            font-size: var(--content-fontsize);
            font-weight: 600;
            color: #35ade8;
          }
        }
      }
      .items-group {
        width: 100%;
        line-height: 35px;
        margin-left: 15px;
        .items {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .item-left {
            .data-content {
              font-size: var(--content-fontsize);
              color: white;
              line-height: 18px;
            }
            .user-group {
              display: flex;
              .item {
                color: wheat;
                font-size: var(--content-fontsize);
              }
            }
          }
          .item-right {
            margin-right: 100px;
            .score-group {
              display: flex;
              line-height: 20px;
              .word {
                color: white;
                margin-right: 10px;
              }
              .num {
                color: #35ade8;
                font-weight: 600;
                font-size: var(--content-fontsize);
              }
            }
          }
        }
      }
    }
  }
}
</style>
